<template>
  <div>
    <!-- <el-row :gutter="20">
      <el-col :span="Mathfloor(buttonlist.length)" v-for="(e, i) in buttonlist" :key="i">
        <el-card class="box-card" shadow="hover">
          <span class="button_card" @click="buttonCard(e.path)">
            <span class="iconfont" :class="e.icon" :style="{'color':e.color}"></span>
            <span> {{e.name}}</span>
          </span>
        </el-card>
      </el-col>
      
    </el-row> -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="card_title">上下架记录</span>
          </div>
          <el-table :data="uplist" height="200" style="width: 100%" :show-header="false">
            <el-table-column prop="billNumber" label="单号" width="180"> </el-table-column>
            <el-table-column prop="billTitle" label="题名" width="180"> </el-table-column>
            <el-table-column prop="putUser.userName" label="上架人"> </el-table-column>
            <el-table-column prop="positionRepository.repositoryName" label="上架库房">
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="单号">
                    <span>{{ props.row.billNumber }}</span>
                  </el-form-item>
                  <el-form-item label="题名">
                    <span>{{ props.row.billTitle }}</span>
                  </el-form-item>
                  <el-form-item label="上架人">
                    <span>{{ props.row.putUser.userName }}</span>
                  </el-form-item>
                  <el-form-item label="上架库房">
                    <span>{{ props.row.positionRepository.repositoryName }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="card_title">盘点单</span>
          </div>
          <el-table :data="uplist" height="200" style="width: 100%" :show-header="false">
            <el-table-column prop="billNumber" label="单号" width="180"> </el-table-column>
            <el-table-column prop="billTitle" label="题名" width="180"> </el-table-column>
            <el-table-column prop="putUser.userName" label="上架人"> </el-table-column>
            <el-table-column prop="positionRepository.repositoryName" label="上架库房">
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="单号">
                    <span>{{ props.row.billNumber }}</span>
                  </el-form-item>
                  <el-form-item label="题名">
                    <span>{{ props.row.billTitle }}</span>
                  </el-form-item>
                  <el-form-item label="上架人">
                    <span>{{ props.row.putUser.userName }}</span>
                  </el-form-item>
                  <el-form-item label="上架库房">
                    <span>{{ props.row.positionRepository.repositoryName }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div ref="outIn" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div ref="main" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="card_title">设备统一管理</span>
          </div>
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item :name="index" v-for="(item, index) in baseInfo" :key="index">
              <template slot="title">
                <span style="width: 150px; margin: 0 50px 0 0"> {{ item.name }}</span>
                <span style="width: 150px; margin: 0 50px 0 0">IP:{{ item.ip }}</span>
                <i :class="item.status == 0
                  ? 'el-icon-success  success_button'
                  : 'el-icon-error danger_button'
                  "></i>
              </template>
              <div class="base_Info">
                <div>名称：{{ item.name }}</div>
                <div>IP:{{ item.ip }}</div>
                <div>
                  状态：
                  <el-tag :type="item.status == 0 ? 'success ' : 'danger'">{{
                    item.status == 0 ? '正常 ' : '异常'
                    }}</el-tag>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'homePage',

  data() {
    return {
      activeName: '1',
      buttonlist: [
        {
          name: '权限',
          icon: 'icon-xitongguanli',
          color: '#1768ac',
          path: 'user',
        },
        {
          name: '扫描',
          icon: 'icon-saoyisaosaomiao',
          color: '#1427df',
        },
        {
          name: '标签管理',
          icon: 'icon-pinpaiguanli',
          color: '#409eff',
        },
        {
          name: '设备',
          icon: 'icon-shebeiguanli',
          color: '#ead41e',
        },
        {
          name: '库房',
          icon: 'icon-kufang',
          color: '#ff9801',
        },
        {
          name: '装具',
          icon: 'icon-wenjianguanli',
          color: '#0096c7',
        },
        {
          name: '打印机设置',
          icon: 'icon-icon-',
          color: '#ee4f12',
        },
        {
          name: '数据备份',
          icon: 'icon-zhengli',
          color: '#78dec7',
        },
      ],
      uplist: [
        {
          billNumber: 'SJ1705457230998824',
          positionRepository: {
            repositoryName: '专用库房',
          },
          billTitle: '1区-1列-2节-1层B面-上架',
          putUser: {
            userName: 'rfid高级管理员',
          },
          detailsli: [
            {
              boxId: 'c8d3ed45-a98e-4c7a-ae31-184a8d587faa',
              boxNo: 'xtg-ZY-2021-000547',
              title: '一文一件档案盒',
              annual: '2021',
              rfid: '217054560240761000000000',
            },
          ],
        },
        {
          billNumber: 'SJ20240117101626',
          billTitle: '1区-1列-2节-1层B面上架',
          putUser: {
            userName: 'rfid高级管理员',
          },
          detailsli: [
            {
              boxId: 'c8d3ed45-a98e-4c7a-ae31-184a8d587faa',
              boxNo: 'xtg-ZY-2021-000547',
              title: '一文一件档案盒',
              annual: '2021',
              rfid: '217054560240761000000000',
            },
          ],
        },
        {
          billNumber: 'SJ20240117111855',
          billTitle: '1区-1列-3节-2层B面上架',
          putUser: {
            userName: 'rfid高级管理员',
          },
          detailsli: [
            {
              boxId: '10cd9e03-f245-4b67-9f66-1fec5167614a',
              boxNo: 'hqh-cw-2025-000010',
              title: '测试档案盒',
              annual: '2025',
              rfid: '217059042264781900000000',
            },
          ],
        },
        {
          billNumber: 'SJ1705286215155527',
          positionRepository: {
            repositoryName: '专用库房',
          },
          billTitle: '1区-1列-1节-2层A面-上架',
          putUser: {
            userName: 'rfid高级管理员',
          },
          detailsli: [
            {
              boxId: '86ecbd1a-9f37-4906-932e-04271434bacf',
              boxNo: 'PDC-pdc-2024-000901',
              title: '盒1',
              annual: '2024',
              rfid: '217084788180050000000000',
            },
          ],
        },
        {
          billNumber: 'SJ1704853638527989',
          positionRepository: {
            repositoryName: '专用库房',
          },
          billTitle: '1区-1列-1节-1层A面-上架',
          putUser: {
            userName: 'rfid高级管理员',
          },
          detailsli: [
            {
              boxId: 'c893633f-0ac3-433c-ba91-494b41171a72',
              boxNo: 'lxc24110-WS-2024-000002',
              title: 'lxc档案盒2',
              annual: '2024',
              rfid: '217048530153471100000000',
            },
            {
              boxId: '01fd25bc-ac2d-4c41-b155-991912c912e3',
              boxNo: 'lxc24110-WS-2024-000001',
              title: 'lxc档案盒1',
              annual: '2024',
              rfid: '217048529816361100000000',
            },
          ],
        },
        {
          billNumber: 'SJ1703209964988820',
          billTitle: '1区-1列-1节-1层A面-上架',
          putUser: {
            userName: 'rfid高级管理员',
          },
          syncTime: '2023-12-22 14:37:00',
          detailsli: [],
        },
      ],
      baseInfo: [
        {
          name: '打印机',
          ip: '192.168.1.100',
          status: '0',
        },
        {
          name: '盘点车',
          ip: '192.168.1.100',
          status: '0',
        },
        {
          name: 'RFID通道门',
          ip: '192.168.1.100',
          status: '1',
        },
        {
          name: 'RFID馆员工作站',
          ip: '192.168.1.100',
          status: '0',
        },
        {
          name: '手持机',
          ip: '192.168.1.100',
          status: '1',
        },
      ],
    }
  },

  mounted() {
    this.initecharts()
    this.initOutInEcharts()
  },

  methods: {
    initecharts() {
      var chartDom = this.$refs.main
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '容量统计',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '已有标签',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '1号库房' },
              { value: 735, name: '2号库房' },
              { value: 580, name: '3号库房' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      option && myChart.setOption(option)

      option && myChart.setOption(option)
    },
    initOutInEcharts() {
      var chartDom = this.$refs.outIn
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '出入统计',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['出库', '入库'],
        },
        // toolbox: {
        //   //保存图片
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '出库',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: '入库',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      }

      option && myChart.setOption(option)
    },

    // 点击按钮路由跳转
    buttonCard(path) {
      this.$router.push(path)
    },
    // 取整方法  计算layout布局的span参数
    Mathfloor(divisor) {
      return Math.floor(24 / divisor)
    },
  },
  computed: {},
}
</script>

<style lang="less" scoped>
.el-card__header {
  padding: 10px 20px;
}

.demo-table-expand .el-form-item {
  margin: 0 10px 0 0;
  color: #99a9bf;

  .el-form-item__content {
    font-size: 12px !important;
  }

  .el-form-item__label {
    font-weight: 600;
    font-size: 12px !important;
  }
}

.button_card {
  cursor: pointer;
  display: flex;
  height: 100%;
  width: 100%;
  padding: 10px 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  &:hover span:nth-child(1) {
    animation: beat 0.3s infinite alternate;
    /*infinite无限循环，alternate动画反向执行回到起点*/
  }

  span:nth-child(1) {
    font-size: 45px;
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  span:nth-child(2) {
    margin: 10px 0 0 0;
  }
}

.base_Info {
  display: flex;
  justify-content: space-between;
}

.card_title {
  font-weight: 700;
  color: #464646;
  font-size: 18px;
}
</style>
